<template>
    <div>
      <i-input name="a" icon="ios-clock-outline" @focus="focus" @blur="blur" readonly style="width:200px;" v-model="v" @enter="enter" @click="iconclick" size="large" placeholder="请输入"></i-input>
      <i-input icon="ios-clock-outline" style="width:200px;" v-model="v" @enter="enter" placeholder="请输入"></i-input>
      <i-input name="b" icon="ios-clock-outline" style="width:200px;" v-model="v" @enter="enter" size="small" placeholder="请输入"></i-input>
      <br>
      <br>
      <i-input style="width:200px;" v-model="v" @enter="enter" size="large" placeholder="请输入"></i-input>
      <i-input style="width:200px;" v-model="v" @enter="enter" placeholder="请输入"></i-input>
      <i-input style="width:200px;" v-model="v" @enter="enter" @change="change" size="small" placeholder="请输入"></i-input>
      {{ v }}
      <br>
      <br>
      <i-input readonly placeholder="this is something" style="width:200px;" v-model="t" type="textarea" :autosize="autosize"></i-input>
      {{ t }}
      <br>
      <br>
      <div style="width: 400px">
          <i-input v-model="v" type="password">
              <span slot="prepend">http://</span>
              <span slot="append">
                  <i-button icon="ios-search"></i-button>
              </span>
          </i-input>
          <br>
          <i-input v-model="v">
              <span slot="prepend">http://</span>
              <span slot="append"><Icon type="ios-search"></Icon></span>
          </i-input>
          <br>
          <i-input v-model="v" size="small">
              <span slot="prepend">http://</span>
              <span slot="append"><Icon type="ios-search"></Icon></span>
          </i-input>
          <br>
          <i-input :value="v" size="large">
              <i-select :model="v" slot="prepend" style="width: 80px">
                  <i-option value="http">http://</i-option>
                  <i-option value="https">https://</i-option>
              </i-select>
              <i-select  slot="append" style="width: 70px">
                  <i-option value="com">.com</i-option>
                  <i-option value="cn">.cn</i-option>
                  <i-option value="net">.net</i-option>
                  <i-option value="io">.io</i-option>
              </i-select>
          </i-input>
      </div>
      <Input-number :value="2" size="small"></Input-number>
      <Input-number :value="2"></Input-number>
      <Input-number :value="2" size="large"></Input-number>
      <i-input type="password"></i-input>
  </div>
</template>
<script>
    //import { iInput, Icon, iButton, iSelect, iOption, InputNumber } from 'iview';
    import iInput from '../iview/components/input'
    import iButton from '../iview/components/button'
    import Icon from '../iview/components/icon'
    import InputNumber from '../iview/components/input-number'
    import iSelect from '../iview/components/select/select.vue'
    import iOption from '../iview/components/select/option.vue'
    export default {
        components: {
            iInput,
            iButton,
            Icon,
            InputNumber,
            iSelect,
            iOption
        },
        props: {
        },
        data () {
            return {
                v: 'hello',
                t: '',
                autosize: {
                    minRows: 2,
                    maxRows: 5
                },
                select1: 'http',
                select2: 'com'
            }
        },
        computed: {
        },
        methods: {
            enter () {
                console.log(123)
            },
            iconclick () {
                console.log('iconclicked')
            },
            change (val) {
                //console.log(val)
            },
            focus () {
                this.$Message.info('focus');
            },
            blur () {
                this.$Message.info('blur');
            }
        }
    }
</script>
